<template>
  <div>
    <navbar :title="`商品`" :right="true"></navbar>
    <div style="margin-bottom: 50px" v-if="data">
      <!-- 轮播图 -->
      <van-swipe @change="onChange" v-if="data.carousel">
        <van-swipe-item v-for="(item, index) in data.carousel" :key="index">
          <img :src="item" alt="" width="100%" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">
            {{ current + 1 }}/{{ data.carousel.length }}
          </div>
        </template>
      </van-swipe>
      <!-- 价格表 -->
      <div class="container">
        <van-row>
          <van-col span="12"
            ><span class="price">{{ data.price }}</span
            ><span style="color: #f2270c; font-size: 0.5rem; font-weight: 600"
              >.{{ data.dot }}</span
            ></van-col
          >
          <van-col
            span="12"
            style="display: flex; justify-content: center; align-items: center"
          >
            <div class="icon">
              <div>
                <van-icon name="refund-o" size="20" />
                <div>降价处理</div>
              </div>
              <div>
                <van-icon name="like-o" size="20" />
                <div>收藏</div>
              </div>
            </div>
          </van-col>
        </van-row>
        <div class="title">
          {{ data.title }}
        </div>
      </div>
      <!-- 单元格 -->
      <div class="cellbox">
        <van-cell
          is-link
          icon="success"
          border
          value="卡其冰淇凌，150*200，1个"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">已选</span>
          </template>
        </van-cell>
        <van-cell
          is-link
          icon="location-o"
          border
          value="北京朝阳区三环到四环之间"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">送至</span>
          </template>
        </van-cell>
        <van-cell is-link icon="after-sale" border>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">运费</span>
            <span class="de">在线支付运费</span>
          </template>
        </van-cell>
      </div>
      <!-- <div class="item">
          <van-tag type="danger">商家发货&售后</van-tag>
        </div> -->
      <van-row style="background-color: #fafafa">
        <van-col
          span="24"
          style="display: flex; flex-wrap: wrap; padding: 0.5rem 1.5rem"
        >
          <div class="item">
            <van-tag type="danger">商家发货&售后</van-tag>
          </div>
          <div class="item">
            <van-tag type="danger">7天无理由退货</van-tag>
          </div>
          <div class="item">
            <van-tag type="danger">免费上门取退</van-tag>
          </div>
          <div class="item">
            <van-tag type="danger">极速审核</van-tag>
          </div>
          <div class="item">
            <van-tag type="danger">送运费险</van-tag>
          </div>
          <div class="item">
            <van-tag type="danger">可配送港澳台及海外</van-tag>
          </div>
        </van-col>
      </van-row>
      <!-- 店铺 -->
      <div class="Shop">
        <!-- head -->
        <div class="head">
          <div class="img">
            <img
              src="http://localhost:3000/img/详情页/details/shop1.png"
              alt=""
              width="100%"
            />
          </div>
          <div class="stit">
            <div class="_n">{{ data.shopTit }}</div>
            <div>
              <van-tag color="#f7f7f7" text-color="#666">店铺星级</van-tag>
              <van-rate
                v-model="value"
                :size="10"
                color="#E93B3D"
                void-icon="star"
                void-color="#eee"
              />
            </div>
          </div>
        </div>
        <div class="body">
          <div class="bleft">
            <div class="bitem" style="border-right: 1px solid #ddd">
              <div class="count">{{ data.productsCount }}</div>
              <div class="btit">粉丝人数</div>
            </div>
            <div class="bitem">
              <div class="count">{{ data.AllProducts }}</div>
              <div class="btit">全部商品</div>
            </div>
          </div>
          <div class="right">
            <div>
              <van-tag type="primary" size="10">评价</van-tag
              ><span>9.00 | 低</span>
            </div>
            <div>
              <van-tag type="success" size="10">物流</van-tag
              ><span>9.00 | 低</span>
            </div>
            <div>
              <van-tag type="danger" size="10">售后</van-tag
              ><span>9.00 | 低</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 标签栏 -->
      <van-tabs v-model="active" style="margin-top: 1rem">
        <van-tab title="商品介绍" style="margin-top: 1rem">
          <div v-for="(item, index) in data.picImg" :key="index">
            <img :src="item" alt="" width="100%" />
          </div>
        </van-tab>
        <van-tab title="规格参数" style="margin-top: 1rem">
          <div class="product_parameters">
            <div class="ptit">商品参数</div>
          </div>
        </van-tab>
        <van-tab title="售后保障" style="margin-top: 1rem">
          <div class="product_parameters">
            <div class="ptit">售后保障</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 商品不存在 -->
    <van-empty description="Fcy还未添加后台数据" v-else />
    <!-- 商品导航 -->
    <van-goods-action style="z-index: 10">
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="Addbtn"
      />
      <van-goods-action-button type="danger" text="立即购买" @click="Buybtn" />
    </van-goods-action>
    <!-- Sku -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :quota="quota"
      :quota-used="quotaUsed"
      @buy-clicked="onBuybtn"
      @add-cart="onAddbtn"
    />
  </div>
</template>

<script>
import { details } from "../api";
import Navbar from "../components/Navbar.vue";
import { mapState } from "vuex";
import { Toast } from "vant";
export default {
  components: { Navbar },
  data() {
    return {
      data: [],
      current: 0,
      value: 3,
      active: 0,
      show: false,
      goodsId: null,
      quotaUsed: null,
      quota: null,
      goods: null,
      sku: {},
    };
  },
  mounted() {
    console.log("商品id", this.$route.query.id);
    window.document.scrollingElement.scrollTo(0, 0);
    this.getDetailsData();
  },
  computed: {
    ...mapState(["isLogin"]),
  },
  methods: {
    async getDetailsData() {
      let params = { goodsId: this.$route.query.id };
      const data = await details(params);
      this.data = data.data.data[0];
      this.value = this.data.shopStar;
      (this.sku = this.data.sku), (this.goods = this.data.goods);
      this.goodsId = this.data.goodsId;
      this.quota = this.data.quota;
      this.quotaUsed = this.data.quotaUsed;
      console.log(this.data);
    },
    isLogins() {
      if (!this.isLogin) {
        setTimeout(() => {
          Toast.fail("请先登录");
         setTimeout(() => {
          this.$router.push("/login");
          return;
        }, 500);
        }, 500);
        
         
      }
    },
    onAddbtn(data) {
      this.isLogins();
      console.log("点击添加购物车", data);
    },
    onBuybtn(data) {
      this.isLogins();
      console.log("点击了购买", data);
    },
    Addbtn() {
      console.log("点击了加入购物车");
      this.show = true;
    },
    Buybtn() {
      console.log("点击了购买");
      this.show = true;
    },
    onChange(e) {
      this.current = e;
    },
  },
};
</script>

<style lang="scss" scoped>
.ptit {
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 0.5rem;
  color: #666;
  align-items: center;
  &::after {
    content: "";
    display: block;
    width: 4rem;
    border-top: 1px solid #ddd;
    margin-left: 1rem;
  }
  &::before {
    content: "";
    display: block;
    width: 4rem;
    border-top: 1px solid #ddd;
    margin-right: 1rem;
  }
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  span {
    margin-left: 0.5rem;
    font-size: 0.5rem;
  }
}
.bitem {
  padding: 1rem;
}
.count {
  color: #333;
}
.btit {
  padding-top: 3px;
  font-size: 0.5rem;
  color: #999;
}
.body {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  .bleft {
    margin-top: 1rem;
    text-align: center;
    justify-content: space-around;
    align-items: center;
    display: flex;
  }
}
._n {
  margin-bottom: 0.3rem;
}
.head {
  display: flex;
  align-items: center;
  font-size: 0.5rem;
  > div {
    margin-right: 1rem;
  }
}
.img {
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border-radius: 0.3rem;
  img {
    display: flex;
  }
}
.Shop {
  padding: 0.5rem 1rem;
}
.item {
  margin-left: 0.5rem;
  flex: none;
}
.de {
  display: inline-block;
  color: #262626;
  font-size: 0.5rem;
  margin-left: 1rem;
}
.title {
  margin-top: 0.5rem;
  font-weight: 600;
}
.container {
  padding: 0 1.2rem;
}
.icon {
  font-size: 0.5rem;
  text-align: center;
  display: flex;
  > div {
    margin-left: 0.5rem;
  }
}
.price {
  font-weight: bold;
  font-size: 1.8rem;
  color: #f2270c;
  &::before {
    content: "￥";
    font-size: 0.8rem;
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
}
</style>